$fontall:14px/1.5 arial,"微软雅黑","Microsoft Yahei","Hiragino Sans GB",sans-seri;
article, aside, details, summary, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, s, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {border: 0 none;margin: 0;outline: 0 none;padding: 0;}
* {word-break: break-all;}
body, html {color:#444; font:$fontall; _background-image:url(about:blank); _background-attachment:fixed;/** 防止 ie6 抖动 **/}
input { margin: 0;padding: 0;vertical-align:middle;font:$fontall; outline:none;}
textarea{font:$fontall; outline:none;}
select{cursor: pointer; vertical-align: middle; font:$fontall; padding:0; margin:0; outline:none;}
option{ padding:0; margin:0; outline:none;}
li {list-style-type: none;}
img {text-align: center; vertical-align: middle;}
address, cite, dfn, em, var { font-style: normal;}
a {
    text-decoration: none; color:#444; cursor:pointer; transition: all 0.4s; -webkit-transition:all 0.4s; -moz-transition: all 0.4s;
    :hover{text-decoration: none;}
}
img{border:0px;}
.clear{ clear: both; padding: 0; margin: 0; line-height: 0;}

::-webkit-scrollbar {
    width: 8px;/*竖向滚动条的宽度*/
    height: 8px;/*横向滚动条的高度*/
}
/*滚动条轨道的样式*/
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
/*滚动条轨道内滑块的样式*/
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(155,155,155,0.4);
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.3);
    
}
/*当焦点不在当前区域滑块的状态（具体为什么要加这句有点忘了，记得是跟刷新时有关）*/
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(155,155,155,0.4);
}


.bgMain{ background-size:100% 100%;}
.bg{ background: #f5f5f5;}

.posR{position: relative;}
.posA{ position: absolute;}
.posCenter{ left: 0; top: 0; right: 0; bottom: 0; margin: auto;}
.bgMain{ background: #F5F5F5;}
.boxShdow{ box-shadow: 0 1px 1px #efebeb;}

@mixin padall($bj) {
    padding:$bj;
}
.overflow-ellipsis3 {//超出...
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
     /*! autoprefixer: off */
     -webkit-box-orient: vertical;
     /* autoprefixer: on */
}
// 日期选择器
.el-year-table td.today .cell{
    color: #606266;
    font-weight: initial!important;
}
// 上传附件
.inputBox {
    width: 98px;
    height: 34px;
    color: white;
    background: #409eff;
    border-radius: 4px;
    text-align: center;
    line-height: 34px;
    overflow: hidden;
    font-size: 12px;
    position: relative;
    margin-top: 3px;
    input {
        width: 100%;
        height: 34px;
        opacity: 0;
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
    }
}
// 必填
.sure .el-form-item__label::before {
    content: "* ";
    color: #ff0000;
  }
// 穿梭框
.transferBox {
    height: 100%;
  }
  .el-select-dropdown{
    max-width: 168px;
}

  .transferBox .transfer {
    display: flex;
    justify-content: space-between;
    width: 750px;
    height: 100%;
    margin: 20px auto;
  }
  .transferBox .transfer .transfer-box {
    width: 40%;
    border: 1px solid #ddd;
    border-radius: 4px;
    height: 100%;
  }
  .transferBox .transfer .transfer-title {
    height: 40px;
    line-height: 40px;
    background: #f5f7fa;
    margin: 0;
    padding-left: 15px;
    border-bottom: 1px solid #ebeef5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 4px 4px 0 0;
  }
  .transferBox .transfer .filter-input {
    width: calc(100% - 40px);
    margin: 15px 20px;
  }
  .transfer .transfer-main {
    height: 100%;
  }
  .transferBox .transfer ul {
    height: 240px;
    overflow: auto;
    margin: 0px 0px 15px 20px;
  }
  .transferBox .transfer ul li {
    display: flex;
    justify-content: space-between;
    padding: 6px 0px;
  }
  .transferBox .transfer ul li .deleteicon {
    margin-right: 20px;
  }
  .transferBox .toRight {
    position: relative;
    top: 166px;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    border: 1px solid #dcdfe6;
    background-color: #f5f7fa;
    color: #c0c4cc;
  }
  .transferBox .ellipsis {
    height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
// 页面开始
.inedxhome {
    .indexLeft{
        @extend .posA;
        left:10px; top:40%; border-radius: 5px; right: auto; background: rgba(255,255,255,.3); max-height: 300px; width:50px; text-align: center; border: 1px solid #83dfff;
        a{ 
            display: block; width: 30px; height: 30px; line-height: 30px; text-align: center; margin: 10px auto; border-radius: 5px; text-decoration: none;
            &:hover{ background:rgba(11, 108, 156, 0.4);}
            span{ color: #FFF;  font-size: 24px;}
        } 
        
    }

    .desktop{
        @extend .posA, .posCenter;
        $mainOutSide:70px;
        left:$mainOutSide; right:$mainOutSide;
        .functionList{
            padding: 10px;
            dl{
                float: left; text-align: center; margin: 10px;
                dt{
                    width: 80px; height: 80px; border-radius: 10px; overflow: hidden;
                    Img{ width: 100%; height: 100%;}
                }
                dd{
                    color: #FFF; height:35px; line-height: 35px;
                }
            }
            .setFunList{ float: left; width: 80px; height: 80px; text-align: center; line-height: 80px; border: 1px dashed #FFF; color: #FFF; margin: 10px; box-sizing: border-box; border-radius: 10px;}
            .setFunList span{ font-size: 27px;}
        }
    }
}

// 头部高度多处调用
$topHeight:50px;
.indexNotice{
    .top{ height: $topHeight; background:#1b7ce2;
        .logo{float: left; line-height: $topHeight; padding: 0 20px; color: #FFF; font-size:22px; font-weight: bold;}
        nav{ 
            overflow: hidden; line-height: $topHeight; text-align: center; text-indent: -20em;
            a{ color: #FFF; font-size: 14px; padding: 0 20px;
                &.on{ background: rgba(255,255,255,.3); padding:8px 20px; border-radius:50px; margin: 0 10px;}
            }
        }
        .user{
            float: right;
              position: relative;
              right:0;
              top: 0;
              font-size: 0;
              color: white;
              cursor: pointer;
              letter-spacing:2px;
       
            span{
                float: left;
                background:#222f3b;
                width: 40px;
                height:40px;
                line-height: 40px;
                text-align: center;
                margin: 5px;
                font-size: 18px;
                border-radius: 50%;
            }
            a{
              display: inline-block;
              width: 50px;
              height: 50px;
              line-height: 68px;
              overflow: hidden;
              text-align: center;
              &:hover{ background: rgba(0,0,0,.1);}
              i{color: #FFF; font-size: 22px;} 
            }
            ul {
                width: 150px;
                float: none;
                position: absolute;
                top: 100%;
                right: 0;
                display: none;
                background-color: #fff;
                box-shadow: 0 1px 5px #eee;
                z-index: 2;
            }
            &:hover ul {
                display: block;
            }
            li {
                margin: 0;
                float: none;
            }
            li:last-child {
                border-top: 1px solid #FAFAFA;
            }
            li a {
                color: #6c6c6c;
                font-size: 16px;
                line-height: 45px;
                display: block;
                text-align: center;
                i{
                    margin-right: 2px;
                     font-size: 16px;
                 }
            }
            li a:hover {
                color: #0e93ff;
                background: #E2F4FF;
            }
              
          }
          
    }
    .inbox,.outbox{
        position: absolute; left: 0; top:$topHeight; right: 0; bottom: 0; margin: auto; box-sizing: border-box;
        .inboxM,.outboxM{
            @include padall(20px);
        }
    }
    .newNotice{
        position: absolute; left: 0; top:0; right: 0; bottom: 0; margin: auto; z-index: 10; box-sizing: border-box; background: #FFF; overflow: hidden; overflow-y: auto;
        .newNoticeM{padding: 20px;
            h4{ height: 40px; line-height:40px; font-weight:normal;}
            .wenbenyu{ padding: 10px;}
            .uploadBox{ padding: 10px; max-width: 500px;}
            .peoList{
                border: 1px solid #dedede; border-radius: 3px; padding: 10px; font-size: 0;
                span{ 
                    display: inline-block; position: relative; width: 60px; height: 40px; line-height: 40px; margin: 0 5px 5px 0; background: #1b7ce2; border: 1px solid #1b7ce2; text-align: center; vertical-align: top; color: #FFF; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
                    em{ 
                        @extend .posA,.posCenter;
                        width: 80%; height:25px; line-height:25px; background:#F30; display:none; color: #FFF; border-radius:50px; font-size: 12px;
                    }
                    &:hover{
                        em{ display: block; cursor: pointer;}
                    }
                }
                .choPeo{ display: inline-block; width: 40px; height: 40px; line-height: 40px; border: 1px dashed #dedede; text-align: center;
                    i{ font-size:28px;}
                    &:hover{ 
                        color: #66b1ff;  border: 1px solid #66b1ff;
                        i{ color: #66b1ff;}
                    }
                }
            }
            .bts{ 
                text-align: center; padding: 10px;
                button{ width: 200px;}
            }
            .fileBox{
                ul{
                    li{
                         width: 500px; border-bottom:1px solid #eaeaea;
                         button{ float: right; margin: 6px 0 0;}
                    }
                }
            }
        }
    }
    .topTool{ 
        padding: 20px 20px 0;
        em{ 
            display: inline-block; padding: 0 0 0 10px;
            &:nth-child(1){ padding: 0;}
        }
        .nextTop{
            padding:10px 0 0;
            .stateSet{ float: left;
                span{ 
                    display: inline-block; font-size: 13px; cursor: pointer; background: #FFF; border:1px solid #1b7ce2; color: #1b7ce2; height:25px; line-height: 25px; padding: 0 15px; border-radius: 3px; margin:0 8px 0 0;
                    &.on{ background:#1b7ce2; color:#FFF;}
                }
            }
            .rightSetBT{ float: right;}
            .leftSetBT{ float: left;}
        }
    }

    .listMain{
        overflow: hidden; overflow-y: auto; margin:0 20px;
        ul{
            li{
                display: flex; padding: 10px 0;
                &:nth-child(even){background: rgba(235, 242, 249, 0.3);}
                .listBox{
                    flex:1;
                    &:first-child{flex:1.5;}
                    h3{ 
                        height: 40px;background: #ebf2f9; font-size: 15px; line-height: 40px; margin: 0 0 10px; text-align: left;
                        em{ 
                            display: inline-block; cursor: pointer; width:18px; height: 18px; line-height: 18px; text-align:center; margin: 0 0 0 5px; border-radius:3px; 
                            i{ font-size:14px; cursor: pointer;}
                            &:hover{ background: rgba(40,118,197,.2); color:#2f95ff;}
                        }
                    }
                    h4{ 
                        font-weight: normal; color: #333; padding: 0 30px 0 10px;text-align:left;
                        em{ display: inline-block; padding:2px 10px; font-size: 12px; border-radius: 50px;}
                    }
                    .bts{ text-align: left;}
                    .readState{ text-align: left; display: block; color: #169232;}
                    .singleMes{ 
                        text-align: left; display: block;
                        em{ padding: 0 5px;}
                    }
                    .unRead{ color: #F30;}
                    dl{
                        padding: 5px 15px 0 0; color: #666;
                        dt{float: left;  text-align: left;}
                        dd{
                            .importance{ 
                                vertical-align: middle;
                                i{vertical-align: middle; margin: -7px 5px 0 0; display: inline-block; font-size:22px;}
                            }
                        }
                    }
                }
            }
        }
    }
    .paging{ text-align: left; padding: 20px 20px 0;}

}

.ndetails{
    $boxW:80%;
    @extend .posA,.posCenter;
    background: #FFF; z-index: 10000;
    .detailsTop{ 
        text-align: center; padding: 10px;
        h2{ padding: 20px 0; font-size:24px;    width: calc(80% + 20px);margin: 0 auto;}
        .synopsis{
            padding: 0 0 20px;
            span{ display: inline-block; padding: 0 20px; color: #888;}
        }
    }
    .messageBox{
        width:$boxW; margin:0 auto; position: relative;
        .messageBoxN{
            @extend .posA, .posCenter; padding: 10px; box-sizing: border-box;
            overflow: hidden; overflow-y: auto; background: #f5f5f5; box-shadow: 0 1px 3px #c5c5c5; border-radius: 5px;
        }
        .suspensionBts{ 
            position: absolute; right: -50px; top: 0;
            a{ 
                display: block; width: 40px; height: 40px; text-align: center; line-height: 40px; background: #3e98f7; margin: 0 0 1px;
                i{
                     color: #FFF; font-size: 18px;
                     &.iconfont{ font-size:22px;}
                }
                &:hover{ background: #1b7ce2;}
            }
        }

    }
    .fileBox{  
        width:$boxW; margin:20px auto 0; position: relative; border-top: 1px solid #dedede;background:white;
        h4{ height:40px; line-height: 40px; font-size: 14px; font-weight: normal;}
        .fileBoxList{
            font-size: 14px; 
            margin-bottom:10px;
            ul{
                li a{color:#1b7ce2;}
            }
        }
    }
    .haveRead{
        width:$boxW; margin:20px auto 0; position: relative;
        h4{ height:40px; line-height: 40px; font-size: 14px; font-weight: normal;}
    }
}

.layerBox{
    height: 400px; position: relative;
    .leftBox{ position: absolute; left: 0; top: 0; right: auto; bottom: 0; border:1px solid #dedede; width: 320px;}
    .rightBox{ position: absolute; left: auto; top: 0; right: 0; bottom: 0; border:1px solid #dedede; width: 320px;}
    .shuttleBox{
        @extend .posA,.posCenter;
        width: 750px;
        .bts{ 
            position: absolute; width:60px; height:120px; left: 0; top: 0; right: 0; bottom: 0; margin: auto; text-align: center;
            button{ width: 40px; height: 40px; text-align: center; line-height: 40px; padding: 0; border-radius: 50%; margin:5px auto;}
        }
        .shuttleBoxN{ 
            position: absolute; left: 0; top: 51px; right: 0; bottom: 0; margin: auto; overflow: hidden; overflow-y: auto;
            .searchBox{ padding: 10px;}
            .peoList{
                @extend .posA,.posCenter; padding:0 10px; top: 52px;
                .peoListM{ 
                    @extend .posA,.posCenter; top:0; padding:0 10px; overflow: auto;
                    label{ display: block; padding: 2px 0;}
                }   
            }
            
        }
        .topbar{ 
            text-align: center; padding:0 10px; height: 50px; line-height: 50px; border-bottom: 1px solid #dedede;
            h3{ text-align: justify; font-weight: normal; font-size: 15px;}
        }
    }
}

.indexPlan{
    @extend .indexNotice;
    .see{
        @extend .inbox;
        .seeM{
            @extend .inboxM;
        }
    }

    .formulate{
        @extend .inbox;
        .formulateM{
            @extend .inboxM;
            .formulateCon{
                h2{ text-align: center; font-size: 28px; padding: 20px 0;}
                em{ display: block; padding: 10px 0;}
                .Content{ overflow: hidden;}
                .bts{ 
                    text-align: center; padding: 20px 0 0;
                    button{ width: 200px;}
                }
            }
        }
    }
}

.indexProclamation{
    @extend .indexNotice;
    .see{
        @extend .inbox;
        .seeM{
            @extend .inboxM;
        }
    }

    .formulate{
        @extend .inbox;
        .formulateM{
            @extend .inboxM;
            .formulateCon{
                h2{ text-align: center; font-size: 28px; padding: 20px 0;}
                em{ display: block; padding: 10px 0;}
                .Content{ overflow: hidden;}
                .bts{ 
                    text-align: center; padding: 20px 0 0;
                    button{ width: 200px;}
                }
            }
        }
    }
}

.watchPeoList{
    max-height: 300px; overflow: hidden; overflow-y: auto;
    dl{
        dt{ height: 30px; line-height: 30px; border-bottom: 1px solid #dedede; color: #333;}
        dd{
            padding:10px;
            span{
                padding:5px; width: 60px; text-align: center; display: inline-block; color: #666;
                &.wtd{ color: #169232;}
            }
        }
    }
}

.leftMenu{ 
    position: absolute; left: 0; top:$topHeight; right: auto; bottom: 0; width: 200px; background: #222f3b;
    h3{
        color:#FFF; font-weight:normal; height: 40px; line-height: 40px; font-size: 16px; text-indent:1em; background:#222f3b;
        i{ font-size:16px; margin:0 10px 0 0;}
    }
    .leftMenuList{
         background: #39444f;
         a{ 
             color:#FFF; display:block; box-sizing: border-box; text-indent: 1.8em; height: 40px; line-height: 40px; border-bottom: 1px solid rgba(0,0,0,.6);
             &:hover{ background: rgba(255,255,255,.1); border-left: 5px solid #008aff;}
             &.on{ background:#FFF; color:#008aff; border-left: 5px solid #008aff;}
             i{ margin:-2px 10px 0 0; font-size: 16px; vertical-align: middle;}
            }
            div{
                a{text-indent:2.2em;}
            }
    }
}

.content{ position: absolute; left: 200px; top:$topHeight; right: 0; bottom: 0; margin:auto; box-sizing: border-box;}

.tabContent{
    @extend .posCenter, .posA;
}

// 编辑器汉化
  .ql-snow .ql-tooltip[data-mode=link]::before {
    content: "请输入链接地址:";
  }
  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
      border-right: 0px;
      content: '保存';
      padding-right: 0px;
  }
  
  .ql-snow .ql-tooltip[data-mode=video]::before {
      content: "请输入视频地址:";
  }
  
  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
    content: '10px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
    content: '18px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
    content: '32px';
  }
  
  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: '文本';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: '标题1';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: '标题2';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: '标题3';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: '标题4';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: '标题5';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: '标题6';
  }
  
  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: '标准字体';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
    content: '衬线字体';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
    content: '等宽字体';
  }
